import React, { useState } from 'react';
import {Card, Form, Input, Button, Upload, Avatar, message, Divider, Tabs, Row, Col, Typography, Select, Space} from 'antd';
import {UserOutlined, LockOutlined, PhoneOutlined, MailOutlined, IdcardOutlined, BankOutlined, CameraOutlined, CheckOutlined, EditOutlined, SafetyOutlined} from '@ant-design/icons';

const { Title, Text } = Typography;
const { TabPane } = Tabs;
const { Option } = Select;

// 模拟初始用户数据
const initialUserData = {
    avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
    username: 'user123',
    nickname: '技术达人',
    email: 'user@example.com',
    phone: '13800138000',
    idCard: '320***********1234',
    bankAccount: '622588******1234',
    bankName: '中国工商银行'
};

const ProfileSettings = () => {
    const [form] = Form.useForm();
    const [userData, setUserData] = useState(initialUserData);
    const [avatar, setAvatar] = useState(initialUserData.avatar);
    const [loading, setLoading] = useState(false);
    const [activeTab, setActiveTab] = useState('basic');

    // 处理头像上传
    const handleAvatarChange = (info) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            // 这里应该是上传到服务器后返回的URL
            const imageUrl = URL.createObjectURL(info.file.originFileObj);
            setAvatar(imageUrl);
            setLoading(false);
            message.success('头像上传成功');
        }
    };

    // 上传前检查
    const beforeUpload = (file) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('只能上传 JPG/PNG 文件!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('图片大小不能超过 2MB!');
        }
        return isJpgOrPng && isLt2M;
    };

    // 保存基本信息
    const handleBasicInfoSubmit = (values) => {
        setLoading(true);
        // 模拟API请求
        setTimeout(() => {
            setUserData({ ...userData, ...values });
            message.success('基本信息更新成功');
            setLoading(false);
        }, 1000);
    };

    // 修改密码
    const handlePasswordSubmit = (values) => {
        setLoading(true);
        // 模拟API请求
        setTimeout(() => {
            message.success('密码修改成功');
            form.resetFields(['oldPassword', 'newPassword', 'confirmPassword']);
            setLoading(false);
        }, 1000);
    };

    // 修改安全信息
    const handleSecuritySubmit = (values) => {
        setLoading(true);
        // 模拟API请求
        setTimeout(() => {
            setUserData({ ...userData, ...values });
            message.success('安全信息更新成功');
            setLoading(false);
        }, 1000);
    };

    return (
        <div style={{ padding: 24 }}>
            <Card variant={false}>
                <Row gutter={24}>
                    <Col xs={24} md={6} style={{ textAlign: 'center' }}>
                        <div style={{ marginBottom: 24 }}>
                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                                <Avatar
                                    size={128}
                                    src={avatar}
                                    icon={<UserOutlined />}
                                    style={{ marginBottom: 16, border: '2px solid #f0f0f0' }}
                                />
                                <Upload
                                    name="avatar"
                                    showUploadList={false}
                                    beforeUpload={beforeUpload}
                                    onChange={handleAvatarChange}
                                    customRequest={({ file, onSuccess }) => {
                                        setTimeout(() => {
                                            onSuccess("ok");
                                        }, 1000);
                                    }}
                                >
                                    <Button icon={<CameraOutlined />}>更换头像</Button>
                                </Upload>
                            </div>
                            <Text type="secondary" style={{ display: 'block', marginTop: 8 }}>
                                支持 JPG/PNG 格式，大小不超过 2MB
                            </Text>
                        </div>

                        <div style={{ textAlign: 'left', padding: '0 16px' }}>
                            <Title level={5} style={{ marginBottom: 8 }}>账号信息</Title>
                            <div style={{ marginBottom: 8 }}>
                                <Text strong>用户名: </Text>
                                <Text>{userData.username}</Text>
                            </div>
                            <div style={{ marginBottom: 8 }}>
                                <Text strong>注册时间: </Text>
                                <Text>2023-01-15</Text>
                            </div>
                            <div style={{ marginBottom: 8 }}>
                                <Text strong>最后登录: </Text>
                                <Text>2023-06-20 14:30</Text>
                            </div>
                        </div>
                    </Col>

                    <Col xs={24} md={18}>
                        <Tabs activeKey={activeTab} onChange={setActiveTab}>
                            <TabPane
                                tab={
                                    <span>
                    <UserOutlined />
                    基本信息
                  </span>
                                }
                                key="basic"
                            >
                                <Form
                                    form={form}
                                    layout="vertical"
                                    initialValues={{
                                        nickname: userData.nickname,
                                        email: userData.email
                                    }}
                                    onFinish={handleBasicInfoSubmit}
                                >
                                    <Form.Item
                                        name="nickname"
                                        label="昵称"
                                        rules={[{ required: true, message: '请输入您的昵称' }]}
                                    >
                                        <Input prefix={<EditOutlined />} placeholder="请输入昵称" />
                                    </Form.Item>

                                    <Form.Item
                                        name="email"
                                        label="电子邮箱"
                                        rules={[
                                            { required: true, message: '请输入您的邮箱' },
                                            { type: 'email', message: '请输入有效的邮箱地址' }
                                        ]}
                                    >
                                        <Input prefix={<MailOutlined />} placeholder="请输入邮箱" />
                                    </Form.Item>

                                    <Form.Item>
                                        <Button
                                            type="primary"
                                            htmlType="submit"
                                            loading={loading}
                                            icon={<CheckOutlined />}
                                        >
                                            保存修改
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </TabPane>

                            <TabPane
                                tab={
                                    <span>
                    <LockOutlined />
                    修改密码
                  </span>
                                }
                                key="password"
                            >
                                <Form layout="vertical" onFinish={handlePasswordSubmit}>
                                    <Form.Item
                                        name="oldPassword"
                                        label="当前密码"
                                        rules={[{ required: true, message: '请输入当前密码' }]}
                                    >
                                        <Input.Password prefix={<LockOutlined />} placeholder="请输入当前密码" />
                                    </Form.Item>

                                    <Form.Item
                                        name="newPassword"
                                        label="新密码"
                                        rules={[
                                            { required: true, message: '请输入新密码' },
                                            { min: 6, message: '密码长度不能少于6位' }
                                        ]}
                                        hasFeedback
                                    >
                                        <Input.Password prefix={<LockOutlined />} placeholder="请输入新密码" />
                                    </Form.Item>

                                    <Form.Item
                                        name="confirmPassword"
                                        label="确认新密码"
                                        dependencies={['newPassword']}
                                        hasFeedback
                                        rules={[
                                            { required: true, message: '请确认新密码' },
                                            ({ getFieldValue }) => ({
                                                validator(_, value) {
                                                    if (!value || getFieldValue('newPassword') === value) {
                                                        return Promise.resolve();
                                                    }
                                                    return Promise.reject(new Error('两次输入的密码不一致'));
                                                }
                                            })
                                        ]}
                                    >
                                        <Input.Password prefix={<LockOutlined />} placeholder="请再次输入新密码" />
                                    </Form.Item>

                                    <Form.Item>
                                        <Button
                                            type="primary"
                                            htmlType="submit"
                                            loading={loading}
                                            icon={<CheckOutlined />}
                                        >
                                            修改密码
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </TabPane>

                            <TabPane
                                tab={
                                    <span>
                    <SafetyOutlined />
                    安全信息
                  </span>
                                }
                                key="security"
                            >
                                <Form
                                    layout="vertical"
                                    initialValues={{
                                        phone: userData.phone,
                                        idCard: userData.idCard,
                                        bankAccount: userData.bankAccount,
                                        bankName: userData.bankName
                                    }}
                                    onFinish={handleSecuritySubmit}
                                >
                                    <Form.Item
                                        name="phone"
                                        label="手机号码"
                                        rules={[
                                            { required: true, message: '请输入手机号码' },
                                            { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码' }
                                        ]}
                                    >
                                        <Input
                                            prefix={<PhoneOutlined />}
                                            placeholder="请输入手机号码"
                                            addonAfter={
                                                <Button type="link" size="small">
                                                    获取验证码
                                                </Button>
                                            }
                                        />
                                    </Form.Item>

                                    <Form.Item
                                        name="idCard"
                                        label="身份证号"
                                        rules={[
                                            { required: true, message: '请输入身份证号码' },
                                            {
                                                pattern: /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{3}[\dXx]$/,
                                                message: '请输入有效的身份证号码'
                                            }
                                        ]}
                                    >
                                        <Input prefix={<IdcardOutlined />} placeholder="请输入身份证号码" />
                                    </Form.Item>

                                    <Divider orientation="left" plain>
                                        <BankOutlined /> 银行信息
                                    </Divider>

                                    <Form.Item
                                        name="bankName"
                                        label="开户银行"
                                        rules={[{ required: true, message: '请选择开户银行' }]}
                                    >
                                        <Select placeholder="请选择开户银行">
                                            <Option value="中国工商银行">中国工商银行</Option>
                                            <Option value="中国建设银行">中国建设银行</Option>
                                            <Option value="中国农业银行">中国农业银行</Option>
                                            <Option value="中国银行">中国银行</Option>
                                            <Option value="招商银行">招商银行</Option>
                                        </Select>
                                    </Form.Item>

                                    <Form.Item
                                        name="bankAccount"
                                        label="银行账号"
                                        rules={[
                                            { required: true, message: '请输入银行账号' },
                                            { pattern: /^\d{16,19}$/, message: '请输入有效的银行账号' }
                                        ]}
                                    >
                                        <Input prefix={<BankOutlined />} placeholder="请输入银行账号" />
                                    </Form.Item>

                                    <Form.Item>
                                        <Space>
                                            <Button
                                                type="primary"
                                                htmlType="submit"
                                                loading={loading}
                                                icon={<CheckOutlined />}
                                            >
                                                保存安全信息
                                            </Button>
                                            <Button>取消</Button>
                                        </Space>
                                    </Form.Item>
                                </Form>
                            </TabPane>
                        </Tabs>
                    </Col>
                </Row>
            </Card>
        </div>
    );
};

export default ProfileSettings;